モデルの永続化とRESTful API – Ember.js入門(23)

モデルの永続化とRESTful API – Ember.js入門(23)

Clock Icon2014.06.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ember-dataによるモデルの登録・更新・削除の続きです。

毎度書いているかと思いますが、Ember.js(emeber-data)では、サーバサイドでモデルの永続化を行うためにRESTful APIを利用することが強く推奨されています。

モデルを取得する時、すなわちDataStoreのfindメソッドを呼び出した場合、GETリクエストが行われます。 詳細はember-dataとREST APIによるモデルの永続化を参照してください。

モデルを永続化する時、すなわちModelのsaveメソッドを呼び出した場合、POST/PUT/DELETEリクエストが行われます。 どのメソッドでリクエストが行われるかは、モデルの状態に依存します。 すなわち、登録(新規作成)状態であればPOST、更新状態であればPUT 、削除状態であればDELETEとなります。

モデルの登録とPOSTリクエスト

新規作成されたモデルのsaveメソッドを呼び出した場合、POSTリクエストが行われます。

この時、リクエストURLはhttp://END_POINT_URL/items/のように、エンドポイントに小文字でモデル名(複数系)が付与された形式です。

var newItem = this.store.createRecord('item', {
  name: 'JUnit実践入門',
  price: 3564
});
newItem.save();

リクエスト

リクエストには、次のようなJSONデータがモデル情報として付与されます。

{
  'item': {
    'name': 'JUnit実践入門',
    'price': 3564
  }
}

サーバサイドでは、このJSONデータをサーバサイドのモデルやフォームオブジェクトとして受け、RDBへの登録処理などを行います。

レスポンス

POSTリクエストのレスポンスでは、登録した結果のモデル情報をJSONデータとして返します。 この時、次のようにサーバサイドで確定されたIDをJSONデータに含める必要があります。

{
  'item': {
    'id': 4,
    'name': 'JUnit実践入門',
    'price': 3564
  }
}

レスポンスのJSONデータにIDを含めなければ、クライアントサイドのStoreにモデルが永続化されたことが反映されませんので、注意してください。

モデルの更新とPUTリクエスト

storeのfindメソッドでサーバサイドから取得したモデルのsaveメソッドを呼び出した場合、PUTリクエストが行われます。

この時、リクエストURLは http://END_POINT_URL/items/4のように、エンドポイントに小文字でモデル名(複数系)を付与し、IDを指定した形式です。

var item = this.store.find('item', 4);
item.set('price', 3740);
item.save();

内部的には、モデルのプロパティが変更されたかどうかの状態を持っており、変更が行われない場合はsaveメソッドを実行してもリクエストは送信されません。

リクエスト

PUTリクエストには、POSTの時と同様にモデル情報がJSONデータとして付与されます。 POSTリクエストと異なる点は、idが含まれている点です。

{
  'item': {
    'id': 4,
    'name': 'JUnit実践入門',
    'price': 3740
  }
}

サーバサイドでは、このJSONデータをサーバサイドのモデルやフォームオブジェクトとして受け、RDBへの更新処理などを行います。

レスポンス

PUTリクエストのレスポンスでは、POSTリクエストと同様に、更新した結果のモデル情報をJSONデータで返します。

{
  'item': {
    'id': 4,
    'name': 'JUnit実践入門',
    'price': 3740
  }
}

モデルの削除とDELETEリクエスト

deleteRecordメソッドで削除状態としたモデルのsaveメソッドを呼び出した時は、DELETEリクエストが行われます。

var item = this.store.find('item', 4);
item.deleteRecord();
item.save();

この時、PUTリクエストと同様に、リクエストURLは http://END_POINT_URL/items/4のように、エンドポイントに小文字でモデル名(複数系)を付与し、IDを指定した形式です。

リクエスト

DELETTリクエストでは、リクエストボディにJSONデータを含めません。

レスポンス

DELETTリクエストでは、レスポンスのJSONデータは不要です。

まとめ

ember-dataでのモデルの永続化をまとめると次のようになります。

操作 メソッド HTTP URL
取得(全件) var items = this.store.find('item'); GET http://END_POINT_URL/items/
取得(1件) var item = this.store.find('item', 1); GET http://END_POINT_URL/items/1
生成 var item = this.store.createRecord('item'); - -
登録 item.save(); POST http://END_POINT_URL/items/
更新 item.save(); PUT http://END_POINT_URL/items/1
削除 item.deleteRecord();
item.save();
DELETE http://END_POINT_URL/items/1

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.